<template>
  <el-container>
    <el-header>
      <el-menu
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect">
        <el-menu-item index="home">
          <img
            style="width: 120px"
            src="@/assets/images/element-plus-logo.svg"
            alt="Element logo">
        </el-menu-item>
        <el-menu-item index="1">
          菜单1
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            菜单2
          </template>
          <el-menu-item index="2-1">
            子菜单1
          </el-menu-item>
          <el-menu-item index="2-2">
            子菜单2
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside>
        <el-menu @select="handleSelect">
          <el-menu-item index="home">
            首页
          </el-menu-item>
          <el-menu-item index="editor">
            编辑器
          </el-menu-item>
          <el-menu-item index="code-diff">
            代码对比
          </el-menu-item>
          <el-menu-item index="instruction">
            指令
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const handleSelect = (key: string, keyPath: string[]) => {
 
  try {
    console.log('handleSelect', key, keyPath);
    router.push({ name:key });
} catch (error) {
  console.error(error);
}
};
</script>

<style lang="scss" scoped>
/* 基础布局样式 */
.el-container {
  height: 100vh; /* 使用视口高度确保容器占满屏幕 */
  /* 顶部导航样式 */
  .el-header {
    position: fixed; /* 固定定位 */
    top: 0; left: 0; right: 0; /* 横向占满屏幕 */
    height: 60px; /* 固定高度 */
    z-index: 10; /* 确保在其他内容上方 */
    border-bottom: 1px solid var(--el-menu-border-color);
    .el-menu--horizontal > .el-menu-item:nth-child(1) {
      margin-right: auto;
    }
  }
  .el-container {
    margin-top: 60px;
  }
  .el-aside {
    width: 220px;
    height: 100%; /* 占满剩余高度 */
    .el-menu {
      height: 100%; /* 菜单占满侧边栏高度 */
      .el-menu-item {
        padding-left: 40px;
      }
    }
  }
  .el-main {
    height: 100%; /* 占满剩余高度 */
    padding: 20px; /* 添加内边距美化布局 */
  }
}
</style>